<template>
	<view class="music_player">
		<image class="big-image" :src="picUrl" mode="aspectFill"></image>
		<view class="big-cover"></view>
		<view class="content">
			<nav-bar :statusHeight="statusHeight"
							 :navBarHeight="navBarHeight">
				<view class="tab">
					<view :class="currentPage === 0 ? 'active': ''">歌曲</view>
					<view class="divider">|</view>
					<view :class="currentPage === 1 ? 'active': ''">歌词</view>
				</view>
			</nav-bar>
			<swiper :style="{height: contentHeight}"
							 @change="handleSwiperChange">
				<swiper-item class="music">
					<view class="album">
						<image :src="picUrl" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="title">{{songName}}</view>
						<view class="subtitle">
							<view class="singer">{{singer}}</view>
							<view class="alias">专辑：{{albumName}}</view>
						</view>
					</view>
					<view class="lyric">{{currentLyricInfo}}</view>
					<view class="progress">
						<slider :block-size="12"
										 @change="handleSliderChange"
										 @changing="handleSliderChanging"
										:value="sliderValue"
										block-color="#4CD964"
										activeColor="#4CD964"></slider>
						<view class="time">
							<view class="current">{{setCurrentTime}}</view>
							<view class="duration">{{setDuration}}</view>
						</view>
					</view>
					<view class="operation">
						<image class="btn btn-mode" :src="'../../static/player/play_'+playMode[playModeIndex]+'.png'" @click="handleModeChange"></image>
						<image class="btn btn-prev" src="../../static/player/play_prev.png" @click="handlePrev"></image>
						<image class="btn btn-pause" :src="imgKey" @click="handleChange"></image>
						<image class="btn btn-next" src="../../static/player/play_next.png" @click="handleNext"></image>
						<image class="btn btn-music" src="../../static/player/play_music.png"></image>
					</view>
				</swiper-item>
				<swiper-item class="lyric">
					<scroll-view :scroll-y="true" 
											 class="lyric-list" 
											 :scroll-top="lyricScrollTop"
											 :scroll-with-animation="true">
						<block v-for="(item,index) in lyricInfos" :key="index">
							<view class="item" 
										:class="currentLyricIndex === index ? 'active':''"
										>{{item.text}}</view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { getMusic, getLyric } from '../../service/music_api.js'
	import { creator } from '../../util/audioCreator.js'
	import { formatTime } from '../../util/format.js'
	import { parseLyric } from '../../util/parse-lyric.js'
	import { getStore, setStore } from '../../util/storage.js'
	
	import navBar from '../../components/nav-bar/nav-bar.vue'
	
	export default {
		components:{
			navBar
		},
		data() {
			return {
				picUrl:'',
				songName: '',
				singer: '',
				albumName: '',
				duration: 0,
				currentTime:0,
				statusHeight: 0,
				navBarHeight:44,
				currentPage: 0,
				contentHeight: '',
				status: false,
				imgKey: '../../static/player/play_pause.png',
				sliderValue: 0,
				sliderChange:false,
				lyricInfos: [],
				currentLyricIndex: 0,
				currentLyricInfo: '',
				lyricScrollTop: 0,
				playModeIndex: 0,
				playMode: ['order', 'random', 'repeat'],
				songIndex: 0,
				songLists: [],
				songId: 0
			}
		},
		computed:{
			setDuration() {
				return formatTime(this.duration)
			},
			setCurrentTime() {
				return formatTime(this.currentTime)
			}
		},
		onLoad(option) {
			this.getData(option.id)
			this.songId = option.id
			const playlist = getStore('playlist')
			this.songIndex = playlist.songIndex
			this.songLists = playlist.songLists
			const res = uni.getSystemInfoSync()
			this.statusHeight = res.statusBarHeight
			this.contentHeight = (res.screenHeight - this.statusHeight - 44) + 'px'
			
			// 音乐播放与时间监听
			this.handleCreator(this.songId)
			creator.onEnded(() => {
				this.handleNext()
			})
			creator.onTimeUpdate(() =>{
				const currentTime = creator.currentTime * 1000

				if(!this.sliderChange){
					this.currentTime = currentTime
					this.sliderValue = currentTime / this.duration * 100
					
					// 设置当前活跃歌词
					let i = 0
					for(;i<this.lyricInfos.length;i++) {
						const lyricInfo = this.lyricInfos[i]
						if(currentTime < lyricInfo.time) {
							break
						}
					}
					
					const currentIndex = i - 1
					if(this.currentLyricIndex !== currentIndex) {
						const currentLyricInfo = this.lyricInfos[currentIndex].text
						this.currentLyricIndex = currentIndex
						this.currentLyricInfo = currentLyricInfo
						this.lyricScrollTop = currentIndex * 35
					}
				}
			})
			this.status = true
		},
		onUnload() {
			this.picUrl = ''
			this.lyricInfos = []
			this.songName = ''
			this.albumName = ''
			this.singer = ''
			this.currentTime = 0
			creator.offCanplay()
			creator.offPlay()
			creator.offPause()
			creator.offStop()
			creator.offEnded()
			creator.offTimeUpdate()
		},
		methods:{
			getData(id){
				getMusic(id).then(res => {	
					this.songName = res.data.songs[0].name
					this.singer = res.data.songs[0].ar[0].name
					this.albumName = res.data.songs[0].al.name
					this.duration = res.data.songs[0].dt
					this.picUrl = res.data.songs[0].al.picUrl
				})
				getLyric(id).then(res =>{
					const result = parseLyric(res.data.lrc.lyric)
					this.lyricInfos = result
				})
			},
			handleSwiperChange(event) {
				this.currentPage = event.detail.current
			},
			handleChange() {
				if(this.status){
					creator.pause()
					this.imgKey = '../../static/player/play_resume.png'
					this.status = !this.status
				}else {
					creator.play()
					this.imgKey = '../../static/player/play_pause.png'
					this.status = !this.status
				}
			},
			handleSliderChange(event) {
				const value = event.detail.value
				const currentTime = this.duration * value / 100
				creator.pause()
				creator.seek(currentTime / 1000)
				this.sliderValue = value
				this.sliderChange = false
			},
			handleSliderChanging(event) {
				this.sliderChange = true
				const value = event.detail.value
				const currentTime = this.duration * value / 100
				this.currentTime = currentTime
			},
			handleModeChange() {
				if(this.playModeIndex === 2) {
					this.playModeIndex = 0
				}else {
					this.playModeIndex ++
				}
			},
			handleNext() {
				this.imgKey = '../../static/player/play_pause.png'
				switch(this.playModeIndex) {
					case 0: 
						if(this.songIndex === this.songLists.length - 1) {
							this.songIndex = 0
						} else {
							this.songIndex ++ 
						}
						this.songId = this.songLists[this.songIndex].id
						break
					case 1:
						this.songIndex = Math.floor(Math.random() * this.songLists.length)
						this.songId = this.songLists[this.songIndex].id
					case 2:
						break
				}
				
				this.getData(this.songId)
				this.handleCreator(this.songId)
			},
			handlePrev() {
				this.imgKey = '../../static/player/play_pause.png'
				switch(this.playModeIndex) {
					case 0: 
						if(this.songIndex === 0) {
							this.songIndex = this.songLists.length - 1
						} else {
							this.songIndex --
						}
						this.songId = this.songLists[this.songIndex].id
						break
					case 1:
						this.songIndex = Math.floor(Math.random() * this.songLists.length)
						this.songId = this.songLists[this.songIndex].id
					case 2:
						break
				}
				
				this.getData(this.songId)
				this.handleCreator(this.songId)
			},
			handleCreator(id) {
				creator.stop()
				creator.src = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
				creator.autoplay = true
				creator.onCanplay(() =>{
					creator.play()
				})
			}
		}
	}
</script>

<style scoped>
	@import "./music_player";
</style>
